<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>特殊商品类型</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row>
            <!-- <el-form-item label="手机号">
              <el-input v-model="searchfrom.queryString"></el-input>
            </el-form-item> -->
              <el-select v-model="searchfrom.queryType" placeholder="请选择">
                <el-option
                  v-for="item in statusLits"
                  :label="item.name"
                  :key="item.status"
                  :value="item.status"
                ></el-option>
              </el-select>
              <el-button @click="searchUserList" type="success" style="width: 170px">查询</el-button>
              <el-button @click="addNew()" type="primary" >新增</el-button>
      </el-row>
      <el-row>
        <el-table :data="gridData" border stripe>
          <!-- <el-table-column property="authName" label="姓名"></el-table-column> -->
          <el-table-column property="name" label="名称"></el-table-column>
          <el-table-column property="image" label="图片">
            <template slot-scope="scope">
              <el-image
                v-if="scope.row.image"
                style="width: 120px; height: 60px"
                :src="scope.row.image"
                :preview-src-list="srcList"
                fit="contain"
                @click="checkimg(scope.row.image)"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
            <el-button
              v-if="scope.row.disabled == 0"
              type="danger"
              size="mini"
              @click="openClose(scope.row, 1)"
              >禁用</el-button
            >
            <el-button
              v-if="scope.row.disabled == 1"
              type="success"
              size="mini"
              @click="openClose(scope.row, 0)"
              >启用</el-button
            >
            <el-button
              type="success"
              size="mini"
              @click="bianji(scope.row)"
              >编辑</el-button
            >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchfrom.pageNo"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="searchfrom.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <el-upload
      class="avatar-uploader"
      :data="params"
      :action="upload.url"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :on-error="uploadFile"
    >
      <img v-show="false" />
    </el-upload>
    <el-dialog title="编辑特殊商品类型" :visible.sync="centerDialogVisible" width="80%" center>
      <el-row>
        <el-col :span="12"><div class="grid-content bg-purple">名称：<el-input v-model="rows.name" placeholder="请输入名称" style="width: 60%;"></el-input></div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light">图片：
        <el-image
          v-if="rows.image"
          style="width: 120px; height: 60px"
          :src="rows.image"
          :preview-src-list="srcList"
          fit="contain"
          @click="checkimg(rows.image)"
        ></el-image><a style="color: #1890ff" @click="changeImg(rows, 'image')">更换图片</a>
        </div></el-col>
      </el-row>
      <el-row v-if="this.searchfrom.queryType==0||this.searchfrom.queryType==1||this.searchfrom.queryType==4">
        <el-col :span="24"><div class="grid-content bg-purple">
           <!-- rows.productType -->
           <!-- <el-checkbox v-for="(it,key) in twoGoodType" :label="it.name" v-model="it.id" @click="handleCheckedCitiesChange(this)"></el-checkbox> -->
           <div v-for="(it,key) in twoGoodType" style="display: inline-block;margin-right: 20px;">
             <input type="checkbox" :value="it.id" name="vehicle" :checked="it.remark" @click="check(it)">{{it.name}}</input>
           </div>
        </div></el-col>
      </el-row>
      <el-row v-if="this.searchfrom.queryType==2||this.searchfrom.queryType==3">
        <el-col :span="12"><div class="grid-content bg-purple">链接：<el-input v-model="rows.productType" placeholder="请输入链接"></el-input></div></el-col>
      </el-row>
      <el-button type="primary" @click="saveAndUpdate(rows,1)">保存</el-button>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      centerDialogVisible: false,
      searchfrom: {
        pageNo: 1,
        pageSize: 10,
        queryString: "",
        queryType: 0//0 申请提币  1审核通过 2提交链上 3链上成功 4链上失败 5拒绝提币
      },
      upload: {
        url: "",
        token: "",
        domain: "",
      },
      params: {},
      rows: {},
      imgName: "",
      gridData: [],
      statusLits: [
        {
          name: "自营商城",
          status: 0
        },
        {
          name: "海外购上",
          status: 1
        },
        {
          name: "联盟好物",
          status: 2
        },
        {
          name: "千城万店",
          status: 3
        },
        {
          name: "联盟好物",
          status: 4
        },
      ],
      total: "",
      twoGoodType:[],
      checksz:[],
    };
  },
  created() {
    this.getOrderList();
    this.qiNiuYun();
    this.two();
  },
  methods: {
    check(it){
      if(it.remark==''){
        it.remark='checked';
      }else{
        it.remark='';
      }
    },
    two(){
      this.$http.post("/manage/product/twoGoodType", {}).then((res) => {
        console.log(res)
        this.twoGoodType=res.data.data;
      })
    },
    bianji(item){
      if(item.productType!=''){
        let self=this;
        this.checksz=item.productType.split(",");
        this.twoGoodType.forEach((n,i)=>{
            if(self.checksz.indexOf(""+n.id)!=-1){
                n.remark='checked';
            }else{
                n.remark='';
            }
        })
      }
      this.rows=item;
      this.centerDialogVisible=true;
      console.log(this.twoGoodType)
    },
    searchUserList() {
      this.searchfrom.pageNo = 1;
      this.getOrderList();
    },
    handleSizeChange(newSize) {
      this.searchfrom.pageSize = newSize;
      this.getOrderList();
    },
    handleCurrentChange(newPage) {
      this.searchfrom.pageNo = newPage;
      this.getOrderList();
    },
    addNew(type,title){
      let obj={id:null,name:"",disabled: 0,image: "",href: "",productType: "",type: this.searchfrom.queryType};
      this.gridData.unshift(obj);
    },
    openClose(rows, open) {
      rows.disabled = open;
      this.saveAndUpdate(rows);
    },
    changeImg(rows, imgName) {
      document.getElementsByClassName("el-upload__input")[0].click();
      this.rows = rows;
      this.imgName = imgName;
    },
    uploadFile() {
      this.qiNiuYun();
      this.$message.error("上传失败，请重试");
    },
    qiNiuYun() {
      this.$http.post("/userFile/qiNiuUpload", {}).then((res) => {
        console.log(res);
        this.upload.token = res.data.data.token;
        this.upload.domain = res.data.data.domain;
        this.upload.url = res.data.data.upload_url;
        this.params.token = res.data.data.token;
        console.log(this.upload);
      });
    },
    saveAndUpdate(rows,type) {
      if(this.searchfrom.queryType==0||this.searchfrom.queryType==1||this.searchfrom.queryType==4){
        if(type==1){
          let str="";
          this.twoGoodType.forEach((n,i)=>{
            if(n.remark=='checked'){
              str=str+","+n.id;
            }
          });
          rows.productType=str;
        }
      }
      console.log(rows)
      this.$http.post("/manage/product/editSpecProductType", rows).then((res) => {
        if (res.data.status == 1){this.centerDialogVisible=false;this.getOrderList();}
        this.$message.success(res.data.message);
      });
    },
    beforeAvatarUpload(file) {
      this.params.key = new Date().getTime(); //file.name;
    },
    handleAvatarSuccess(res, file) {
      this.rows[this.imgName] = this.upload.domain + res.key;
    },
    getOrderList() {
      // POST
      this.$http
        .post("/manage/product/specProductType", this.searchfrom)
        .then(res => {
         console.log(res);
          if (res.data.status == 1) {
            this.gridData = res.data.data.list;
            this.total = res.data.data.total;
            console.log(this.gridData);
          } else {
            this.$message({
              message: res.data.message,
              type: "success"
            });
          }
        });
    }
  }
};
</script>

<style scoped>
  .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 4px;
    }
    /* .bg-purple-dark {
      background: #99a9bf;
    }
    .bg-purple {
      background: #d3dce6;
    }
    .bg-purple-light {
      background: #e5e9f2;
    } */
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
</style>
